<template>
  <div class="success-rewards-container">
    <a-breadcrumb class="breadcrumb">
      <a-breadcrumb-item>
        <router-link to="/salvation">超度与救赎</router-link>
      </a-breadcrumb-item>
      <a-breadcrumb-item>
        <router-link to="/salvation/redemption-plan">救赎计划管理</router-link>
      </a-breadcrumb-item>
      <a-breadcrumb-item>成功奖励</a-breadcrumb-item>
    </a-breadcrumb>

    <div class="page-header">
      <h1 class="page-title">救赎成功奖励</h1>
      <p class="page-subtitle">管理救赎任务完成后的奖励发放和等级提升</p>
      <a-space>
        <a-button type="primary" @click="handleCreate">
          <template #icon><PlusOutlined /></template>
          创建奖励
        </a-button>
        <a-button @click="handleDistribute">
          <template #icon><SendOutlined /></template>
          批量发放
        </a-button>
        <a-button @click="handleExport">
          <template #icon><GiftOutlined /></template>
          导出报告
        </a-button>
      </a-space>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-cards">
      <a-card class="stat-card">
        <div class="stat-content">
          <GiftOutlined class="stat-icon" />
          <div class="stat-info">
            <div class="stat-value">248</div>
            <div class="stat-label">本月发放奖励</div>
          </div>
        </div>
      </a-card>

      <a-card class="stat-card">
        <div class="stat-content">
          <TrophyOutlined class="stat-icon" />
          <div class="stat-info">
            <div class="stat-value">156,890</div>
            <div class="stat-label">功德总发放</div>
          </div>
        </div>
      </a-card>

      <a-card class="stat-card">
        <div class="stat-content">
          <RiseOutlined class="stat-icon" />
          <div class="stat-info">
            <div class="stat-value">89</div>
            <div class="stat-label">等级提升人数</div>
          </div>
        </div>
      </a-card>

      <a-card class="stat-card">
        <div class="stat-content">
          <StarOutlined class="stat-icon" />
          <div class="stat-info">
            <div class="stat-value">4.8</div>
            <div class="stat-label">平均满意度</div>
          </div>
        </div>
      </a-card>
    </div>

    <!-- 奖励记录 -->
    <a-card class="table-card">
      <a-table :columns="columns" :data-source="rewardsData" :pagination="pagination" row-key="id">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'recipient'">
            <div class="recipient-info">
              <a-avatar :src="record.avatar" :size="32">{{ record.recipientName.charAt(0) }}</a-avatar>
              <div>
                <div class="name">{{ record.recipientName }}</div>
                <div class="level">{{ record.level }}</div>
              </div>
            </div>
          </template>

          <template v-else-if="column.key === 'rewards'">
            <div class="rewards-list">
              <a-tag v-for="reward in record.rewards" :key="reward.type" :color="getRewardColor(reward.type)">
                {{ reward.value }}
              </a-tag>
            </div>
          </template>

          <template v-else-if="column.key === 'status'">
            <a-tag :color="getStatusColor(record.status)">{{ getStatusText(record.status) }}</a-tag>
          </template>

          <template v-else-if="column.key === 'actions'">
            <a-dropdown>
              <template #overlay>
                <a-menu @click="handleMenuClick($event, record)">
                  <a-menu-item key="view"> <EyeOutlined /> 查看详情 </a-menu-item>
                  <a-menu-item key="edit"> <EditOutlined /> 编辑 </a-menu-item>
                  <a-menu-item key="resend"> <GiftOutlined /> 重新发放 </a-menu-item>
                  <a-menu-item key="delete" class="danger-item"> <DeleteOutlined /> 删除 </a-menu-item>
                </a-menu>
              </template>
              <a-button type="text"> 操作 <DownOutlined /> </a-button>
            </a-dropdown>
          </template>
        </template>
      </a-table>
    </a-card>

    <!-- 新增/编辑奖励模态框 -->
    <a-modal v-model:open="showRewardModal" :title="isEditing ? '编辑奖励' : '创建奖励'" width="800px" @ok="saveReward" @cancel="resetRewardForm" :confirmLoading="saving">
      <a-form layout="vertical">
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="获奖人员" required>
              <a-input v-model:value="rewardForm.name" placeholder="请输入姓名" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="完成任务" required>
              <a-input v-model:value="rewardForm.taskName" placeholder="请输入任务名称" />
            </a-form-item>
          </a-col>
        </a-row>

        <a-form-item label="奖励类型" required>
          <a-radio-group v-model:value="rewardForm.rewardType">
            <a-radio value="merit">仅功德奖励</a-radio>
            <a-radio value="experience">仅经验奖励</a-radio>
            <a-radio value="both">功德+经验</a-radio>
          </a-radio-group>
        </a-form-item>

        <a-row :gutter="16" v-if="rewardForm.rewardType === 'merit' || rewardForm.rewardType === 'both'">
          <a-col :span="12">
            <a-form-item label="基础功德">
              <a-input-number v-model:value="rewardForm.baseMerit" :min="0" :max="10000" style="width: 100%" placeholder="基础功德值" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="奖励功德">
              <a-input-number v-model:value="rewardForm.bonusMerit" :min="0" :max="5000" style="width: 100%" placeholder="额外奖励" />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="16" v-if="rewardForm.rewardType === 'experience' || rewardForm.rewardType === 'both'">
          <a-col :span="12">
            <a-form-item label="基础经验">
              <a-input-number v-model:value="rewardForm.baseExp" :min="0" :max="1000" style="width: 100%" placeholder="基础经验值" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="奖励经验">
              <a-input-number v-model:value="rewardForm.bonusExp" :min="0" :max="500" style="width: 100%" placeholder="额外奖励" />
            </a-form-item>
          </a-col>
        </a-row>

        <a-form-item label="奖励原因">
          <a-input v-model:value="rewardForm.bonusReason" placeholder="请输入获得奖励的原因" />
        </a-form-item>

        <a-form-item label="特殊奖励">
          <a-select v-model:value="rewardForm.specialRewards" mode="tags" placeholder="选择或输入特殊奖励" style="width: 100%">
            <a-select-option value="荣誉证书">荣誉证书</a-select-option>
            <a-select-option value="推荐信">推荐信</a-select-option>
            <a-select-option value="智慧徽章">智慧徽章</a-select-option>
            <a-select-option value="经典藏书">经典藏书</a-select-option>
            <a-select-option value="修行指导">修行指导</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="备注说明">
          <a-textarea v-model:value="rewardForm.notes" :rows="3" placeholder="请输入备注说明" />
        </a-form-item>
      </a-form>
    </a-modal>

    <!-- 奖励详情模态框 -->
    <a-modal v-model:open="showDetailModal" title="奖励详情" width="800px" :footer="null">
      <div class="reward-detail" v-if="selectedReward">
        <a-row :gutter="24">
          <a-col :span="8">
            <a-card class="participant-card">
              <div class="participant-info">
                <a-avatar :size="80" :src="selectedReward.avatar" />
                <h3>{{ selectedReward.name }}</h3>
                <a-tag :color="getLevelColor(selectedReward.currentLevel)"> LV.{{ selectedReward.currentLevel }} </a-tag>
                <div class="contact-info">
                  <p><UserOutlined /> {{ selectedReward.phoneNumber }}</p>
                  <p><SendOutlined /> {{ selectedReward.email }}</p>
                </div>
                <div class="level-info" v-if="selectedReward.levelUp">
                  <a-alert message="等级提升" :description="`从 LV.${selectedReward.previousLevel} 升级到 LV.${selectedReward.currentLevel}`" type="success" show-icon />
                </div>
              </div>
            </a-card>
          </a-col>

          <a-col :span="16">
            <a-card class="reward-info-card">
              <h4>{{ selectedReward.taskName }}</h4>
              <p class="completion-info">完成时间: {{ selectedReward.completionDate }}</p>

              <a-divider>奖励详情</a-divider>

              <a-row :gutter="16" class="reward-breakdown">
                <a-col :span="12">
                  <a-statistic title="功德奖励" :value="selectedReward.rewardAmount" suffix="点" :value-style="{ color: '#ffd700' }" />
                  <div class="breakdown" v-if="selectedReward.rewardDetails">
                    <small>基础: {{ selectedReward.rewardDetails.baseMerit }}</small>
                    <small v-if="selectedReward.rewardDetails.bonusMerit"> + 奖励: {{ selectedReward.rewardDetails.bonusMerit }} </small>
                  </div>
                </a-col>
                <a-col :span="12">
                  <a-statistic title="经验获得" :value="selectedReward.experienceGain" suffix="点" :value-style="{ color: '#52c41a' }" />
                  <div class="breakdown" v-if="selectedReward.rewardDetails">
                    <small>基础: {{ selectedReward.rewardDetails.baseExp }}</small>
                    <small v-if="selectedReward.rewardDetails.bonusExp"> + 奖励: {{ selectedReward.rewardDetails.bonusExp }} </small>
                  </div>
                </a-col>
              </a-row>

              <div class="special-rewards" v-if="selectedReward.rewardDetails?.specialRewards?.length">
                <a-divider>特殊奖励</a-divider>
                <a-space>
                  <a-tag v-for="reward in selectedReward.rewardDetails.specialRewards" :key="reward" color="gold"> <TrophyOutlined /> {{ reward }} </a-tag>
                </a-space>
              </div>

              <div class="satisfaction-rating">
                <a-divider>满意度评价</a-divider>
                <a-rate :value="selectedReward.satisfactionRating" disabled />
                <span class="rating-text">({{ selectedReward.satisfactionRating }}/5)</span>
              </div>
            </a-card>
          </a-col>
        </a-row>

        <a-card class="additional-info" style="margin-top: 16px">
          <a-descriptions :column="2" bordered>
            <a-descriptions-item label="任务难度">
              <a-tag :color="getDifficultyColor(selectedReward.taskDifficulty)">
                {{ getDifficultyText(selectedReward.taskDifficulty) }}
              </a-tag>
            </a-descriptions-item>
            <a-descriptions-item label="任务时长">{{ selectedReward.taskDuration }} 天</a-descriptions-item>
            <a-descriptions-item label="发放人员">{{ selectedReward.distributedBy }}</a-descriptions-item>
            <a-descriptions-item label="发放时间">{{ selectedReward.distributedAt }}</a-descriptions-item>
            <a-descriptions-item label="奖励原因" :span="2">{{ selectedReward.bonusReason || '按标准发放' }}</a-descriptions-item>
            <a-descriptions-item label="备注说明" :span="2">{{ selectedReward.notes || '无' }}</a-descriptions-item>
          </a-descriptions>
        </a-card>
      </div>
    </a-modal>

    <!-- 批量发放模态框 -->
    <a-modal v-model:open="showDistributeModal" title="批量发放奖励" width="600px" @ok="distributeRewards" :confirmLoading="saving">
      <a-form layout="vertical">
        <a-form-item label="选择接收人员" required>
          <a-select v-model:value="distributeForm.recipientIds" mode="multiple" placeholder="选择接收奖励的人员" style="width: 100%">
            <a-select-option value="1">张三 - 孤儿院志愿服务</a-select-option>
            <a-select-option value="2">李四 - 道德经研读</a-select-option>
            <a-select-option value="3">王五 - 环保清洁行动</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="奖励模板">
          <a-select v-model:value="distributeForm.rewardTemplate" placeholder="选择奖励模板">
            <a-select-option value="standard">标准奖励模板</a-select-option>
            <a-select-option value="excellent">优秀表现模板</a-select-option>
            <a-select-option value="outstanding">杰出贡献模板</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="通知方式">
          <a-radio-group v-model:value="distributeForm.notifyMethod">
            <a-radio value="email">邮件通知</a-radio>
            <a-radio value="sms">短信通知</a-radio>
            <a-radio value="both">邮件+短信</a-radio>
          </a-radio-group>
        </a-form-item>

        <a-form-item label="自定义消息">
          <a-textarea v-model:value="distributeForm.customMessage" :rows="4" placeholder="请输入发放奖励的自定义消息" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { PlusOutlined, GiftOutlined, TrophyOutlined, RiseOutlined, StarOutlined, EditOutlined, DeleteOutlined, DownOutlined, EyeOutlined, SendOutlined, UserOutlined } from '@ant-design/icons-vue'
import { message, Modal } from 'ant-design-vue'

// 响应式数据
const loading = ref(false)
const saving = ref(false)

// 模态框控制
const showRewardModal = ref(false)
const showDetailModal = ref(false)
const showDistributeModal = ref(false)
const isEditing = ref(false)
const selectedReward = ref(null)

const rewardsData = ref([
  {
    id: 1,
    recipientName: '张三',
    name: '张三',
    avatar: 'https://randomuser.me/api/portraits/men/1.jpg',
    level: '修行者 Lv.3',
    currentLevel: 3,
    previousLevel: 2,
    taskName: '孤儿院志愿服务',
    rewardAmount: 500,
    experienceGain: 100,
    levelUp: true,
    satisfactionRating: 5,
    rewards: [
      { type: 'merit', value: '500功德' },
      { type: 'exp', value: '100经验' }
    ],
    status: 'received',
    issueTime: '2024-01-26',
    completionDate: '2024-01-25',
    phoneNumber: '138****1234',
    email: 'zhangsan@email.com',
    taskDifficulty: 2,
    taskDuration: 30,
    bonusReason: '超额完成任务目标',
    distributedBy: '管理员001',
    distributedAt: '2024-01-25 14:30:00',
    notes: '表现优秀，获得额外奖励',
    rewardDetails: {
      baseMerit: 400,
      bonusMerit: 100,
      baseExp: 80,
      bonusExp: 20,
      specialRewards: ['荣誉证书', '推荐信']
    }
  },
  {
    id: 2,
    recipientName: '李四',
    name: '李四',
    avatar: 'https://randomuser.me/api/portraits/men/2.jpg',
    level: '善行者 Lv.5',
    currentLevel: 4,
    previousLevel: 3,
    taskName: '道德经研读',
    rewardAmount: 800,
    experienceGain: 150,
    levelUp: true,
    satisfactionRating: 5,
    rewards: [
      { type: 'merit', value: '800功德' },
      { type: 'level', value: '升级' }
    ],
    status: 'issued',
    issueTime: '2024-01-25',
    completionDate: '2024-01-20',
    phoneNumber: '139****5678',
    email: 'lisi@email.com',
    taskDifficulty: 3,
    taskDuration: 60,
    bonusReason: '深度理解，心得体会优秀',
    distributedBy: '管理员002',
    distributedAt: '2024-01-20 16:45:00',
    notes: '学习态度认真，理解深刻',
    rewardDetails: {
      baseMerit: 700,
      bonusMerit: 100,
      baseExp: 120,
      bonusExp: 30,
      specialRewards: ['智慧徽章', '经典藏书']
    }
  }
])

// 表单数据
const rewardForm = ref({
  name: '',
  taskName: '',
  rewardType: 'merit',
  baseMerit: 100,
  bonusMerit: 0,
  baseExp: 20,
  bonusExp: 0,
  bonusReason: '',
  specialRewards: [],
  notes: ''
})

const distributeForm = ref({
  recipientIds: [],
  rewardTemplate: '',
  customMessage: '',
  notifyMethod: 'email'
})

const columns = [
  { title: '获奖者', key: 'recipient', width: 200 },
  { title: '完成任务', dataIndex: 'taskName', width: 200 },
  { title: '奖励内容', key: 'rewards', width: 250 },
  { title: '状态', key: 'status', width: 100 },
  { title: '发放时间', dataIndex: 'issueTime', width: 120 },
  { title: '操作', key: 'actions', width: 100 }
]

const pagination = ref({ pageSize: 10 })

const getRewardColor = (type) => {
  const colors = { merit: 'gold', exp: 'green', level: 'blue', title: 'purple' }
  return colors[type] || 'default'
}

const getStatusColor = (status) => {
  const colors = { pending: 'orange', issued: 'processing', received: 'success' }
  return colors[status] || 'default'
}

const getStatusText = (status) => {
  const texts = { pending: '待发放', issued: '已发放', received: '已接收' }
  return texts[status] || '未知'
}

const handleMenuClick = ({ key }, record) => {
  selectedReward.value = record

  switch (key) {
    case 'view':
      showDetailModal.value = true
      break

    case 'edit':
      isEditing.value = true
      rewardForm.value = {
        name: record.name,
        taskName: record.taskName,
        rewardType: record.rewardType || 'merit',
        baseMerit: record.rewardDetails?.baseMerit || record.rewardAmount,
        bonusMerit: record.rewardDetails?.bonusMerit || 0,
        baseExp: record.rewardDetails?.baseExp || record.experienceGain,
        bonusExp: record.rewardDetails?.bonusExp || 0,
        bonusReason: record.bonusReason || '',
        specialRewards: record.rewardDetails?.specialRewards || [],
        notes: record.notes || ''
      }
      showRewardModal.value = true
      break

    case 'resend':
      Modal.confirm({
        title: '确认重新发放',
        content: `确定要重新发放奖励给"${record.name}"吗？`,
        okText: '确认',
        cancelText: '取消',
        onOk() {
          message.success(`奖励已重新发放给 ${record.name}`)
        }
      })
      break

    case 'delete':
      Modal.confirm({
        title: '确认删除',
        content: `确定要删除"${record.name}"的奖励记录吗？此操作不可撤销。`,
        okText: '确认',
        cancelText: '取消',
        okType: 'danger',
        onOk() {
          const index = rewardsData.value.findIndex((reward) => reward.id === record.id)
          if (index !== -1) {
            rewardsData.value.splice(index, 1)
            message.success('奖励记录删除成功')
          }
        }
      })
      break
  }
}

const handleCreate = () => {
  isEditing.value = false
  resetRewardForm()
  showRewardModal.value = true
}

const handleDistribute = () => {
  distributeForm.value = {
    recipientIds: [],
    rewardTemplate: '',
    customMessage: '',
    notifyMethod: 'email'
  }
  showDistributeModal.value = true
}

const handleExport = () => {
  message.info('导出奖励报告')
}

const resetRewardForm = () => {
  rewardForm.value = {
    name: '',
    taskName: '',
    rewardType: 'merit',
    baseMerit: 100,
    bonusMerit: 0,
    baseExp: 20,
    bonusExp: 0,
    bonusReason: '',
    specialRewards: [],
    notes: ''
  }
}

const saveReward = async () => {
  try {
    saving.value = true
    // 模拟保存延迟
    await new Promise((resolve) => setTimeout(resolve, 1000))

    if (isEditing.value) {
      // 编辑现有奖励
      const index = rewardsData.value.findIndex((reward) => reward.id === selectedReward.value.id)
      if (index !== -1) {
        rewardsData.value[index] = {
          ...rewardsData.value[index],
          ...rewardForm.value,
          rewardAmount: (rewardForm.value.baseMerit || 0) + (rewardForm.value.bonusMerit || 0),
          experienceGain: (rewardForm.value.baseExp || 0) + (rewardForm.value.bonusExp || 0),
          updatedAt: new Date().toISOString()
        }
      }
      message.success('奖励更新成功')
    } else {
      // 新增奖励
      const newReward = {
        id: Date.now(),
        recipientName: rewardForm.value.name,
        name: rewardForm.value.name,
        ...rewardForm.value,
        rewardAmount: (rewardForm.value.baseMerit || 0) + (rewardForm.value.bonusMerit || 0),
        experienceGain: (rewardForm.value.baseExp || 0) + (rewardForm.value.bonusExp || 0),
        status: 'pending',
        issueTime: new Date().toISOString().split('T')[0],
        completionDate: new Date().toISOString().split('T')[0],
        satisfactionRating: 0,
        level: 'LV.1',
        currentLevel: 1,
        previousLevel: 1,
        levelUp: false,
        avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=' + Date.now(),
        rewards: []
      }
      rewardsData.value.unshift(newReward)
      message.success('奖励创建成功')
    }

    showRewardModal.value = false
    resetRewardForm()
  } catch (error) {
    message.error('保存失败，请重试')
  } finally {
    saving.value = false
  }
}

const distributeRewards = async () => {
  try {
    saving.value = true
    // 模拟发放延迟
    await new Promise((resolve) => setTimeout(resolve, 1500))

    message.success(`奖励批量发放成功，共发放给 ${distributeForm.value.recipientIds.length} 人`)
    showDistributeModal.value = false
  } catch (error) {
    message.error('发放失败，请重试')
  } finally {
    saving.value = false
  }
}

const getLevelColor = (level) => {
  const colors = {
    1: 'default',
    2: 'green',
    3: 'blue',
    4: 'purple',
    5: 'gold'
  }
  return colors[level] || 'default'
}

const getDifficultyColor = (difficulty) => {
  const colors = { 1: 'green', 2: 'blue', 3: 'orange', 4: 'red' }
  return colors[difficulty] || 'default'
}

const getDifficultyText = (difficulty) => {
  const texts = { 1: '简单', 2: '普通', 3: '困难', 4: '地狱' }
  return texts[difficulty] || '未知'
}
</script>

<style lang="scss" scoped>
.success-rewards-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  padding: 24px;

  .breadcrumb {
    margin-bottom: 24px;
    :deep(.ant-breadcrumb-link) {
      color: rgba(255, 255, 255, 0.65);
      &:hover {
        color: #ffd700;
      }
    }
    :deep(.ant-breadcrumb-separator) {
      color: rgba(255, 255, 255, 0.45);
    }
  }

  .page-header {
    margin-bottom: 32px;

    .page-title {
      color: #ffd700;
      font-size: 28px;
      font-weight: 600;
      margin: 0 0 8px 0;
    }

    .page-subtitle {
      color: rgba(255, 255, 255, 0.65);
      margin-bottom: 16px;
    }

    :deep(.ant-btn-primary) {
      background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
      border-color: #ffd700;
      color: #1a1a2e;
    }
  }

  .stats-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
    margin-bottom: 32px;

    .stat-card {
      background: rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 12px;

      :deep(.ant-card-body) {
        padding: 24px;
      }

      .stat-content {
        display: flex;
        align-items: center;
        gap: 16px;

        .stat-icon {
          font-size: 24px;
          color: #ffd700;
        }

        .stat-info {
          .stat-value {
            font-size: 24px;
            font-weight: 600;
            color: #ffd700;
          }
          .stat-label {
            color: rgba(255, 255, 255, 0.65);
          }
        }
      }
    }
  }

  .table-card {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;

    :deep(.ant-table) {
      background: transparent;
      .ant-table-thead > tr > th {
        background: rgba(255, 255, 255, 0.05);
        color: rgba(255, 255, 255, 0.85);
      }
      .ant-table-tbody > tr > td {
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        color: rgba(255, 255, 255, 0.85);
      }
    }
  }

  .recipient-info {
    display: flex;
    align-items: center;
    gap: 12px;

    .name {
      color: #ffd700;
      font-weight: 500;
    }
    .level {
      color: rgba(255, 255, 255, 0.45);
      font-size: 12px;
    }
  }

  .rewards-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }

  :deep(.ant-tag) {
    border-radius: 6px;
    font-weight: 500;
  }

  :deep(.danger-item) {
    color: #ff4d4f;

    &:hover {
      background: rgba(255, 77, 79, 0.1);
    }
  }

  // 详情模态框样式
  .reward-detail {
    .participant-card {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);

      .participant-info {
        text-align: center;

        h3 {
          color: #ffd700;
          margin: 16px 0 8px;
        }

        .contact-info {
          margin: 16px 0;
          font-size: 12px;
          color: rgba(255, 255, 255, 0.65);

          p {
            margin: 4px 0;
          }
        }

        .level-info {
          margin-top: 16px;
        }
      }
    }

    .reward-info-card {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);

      h4 {
        color: #ffd700;
        margin-bottom: 8px;
      }

      .completion-info {
        color: rgba(255, 255, 255, 0.65);
        margin-bottom: 16px;
      }

      .reward-breakdown {
        margin-bottom: 16px;

        .breakdown {
          margin-top: 8px;
          display: flex;
          flex-direction: column;
          gap: 2px;

          small {
            color: rgba(255, 255, 255, 0.55);
            font-size: 11px;
          }
        }
      }

      .special-rewards {
        margin-bottom: 16px;
      }

      .satisfaction-rating {
        .rating-text {
          margin-left: 8px;
          color: rgba(255, 255, 255, 0.65);
        }
      }
    }

    .additional-info {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
    }
  }

  // 模态框样式
  :deep(.ant-modal) {
    .ant-modal-content {
      background: rgba(26, 26, 46, 0.95);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .ant-modal-header {
      background: transparent;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);

      .ant-modal-title {
        color: #ffd700;
        font-weight: 600;
      }
    }

    .ant-modal-body {
      color: rgba(255, 255, 255, 0.85);
    }

    .ant-modal-footer {
      background: transparent;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
  }

  :deep(.ant-form-item-label > label) {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
  }

  :deep(.ant-input),
  :deep(.ant-input-number),
  :deep(.ant-textarea),
  :deep(.ant-select) {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.85);

    &:hover,
    &:focus {
      border-color: #ffd700;
      box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.2);
    }

    &::placeholder {
      color: rgba(255, 255, 255, 0.45);
    }
  }

  :deep(.ant-descriptions) {
    .ant-descriptions-item-label {
      background: rgba(255, 255, 255, 0.05);
      color: rgba(255, 255, 255, 0.85);
      font-weight: 500;
    }

    .ant-descriptions-item-content {
      background: rgba(255, 255, 255, 0.02);
      color: rgba(255, 255, 255, 0.85);
    }
  }

  @media (max-width: 768px) {
    padding: 16px;

    .stats-cards {
      grid-template-columns: 1fr;
      gap: 16px;
    }

    .page-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;
    }

    :deep(.ant-modal) {
      margin: 0;
      max-width: 100vw;

      .ant-modal-content {
        margin: 20px;
      }
    }

    .reward-detail {
      .ant-row {
        .ant-col {
          margin-bottom: 16px;
        }
      }
    }
  }

  .rewards-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
}
</style>
